<template>
  <el-dialog
    :title="props.title"
    v-model="state.visible"
    :width="props.width"
    @close="handleClose"
    center
  >
    <slot />
    <template #prefix-footer><div /></template>
    <template #footer>
      <div class="flex justify-between">
        <div />
        <div>
          <el-button size="small" @click="state.visible = false">{{
            props.cancelButtonText
          }}</el-button>
          <el-button
            size="small"
            type="primary"
            :loading="props.confirmLoading"
            @click="handleConfirm"
            >{{ props.confirmButtonText }}</el-button
          >
        </div>
        <div />
      </div>
    </template>
    <template #suffix-footer><div /></template>
  </el-dialog>
</template>
<script lang="ts"></script>
<script lang="ts" setup>
import { reactive } from "vue";

const props = defineProps({
  title: {
    type: String,
    default: "标题"
  },
  width: {
    type: [String, Number],
    default: "586px"
  },
  confirmButtonText: {
    type: String,
    default: "确 定"
  },
  cancelButtonText: {
    type: String,
    default: "取 消"
  },
  showCancelButton: {
    type: Boolean,
    default: !0
  },
  showConfirmButton: {
    type: Boolean,
    default: !0
  },
  confirmLoading: {
    type: Boolean,
    default: !1
  }
});
const emit = defineEmits(["close", "confirm"]);
const state = reactive({
  visible: false
});
const open = function () {
  console.log(999, "open");
  state.visible = true;
};
const close = function () {
  state.visible = false;
};
const handleClose = function () {
  console.log("handleClose");
  emit("close");
};
const handleConfirm = function () {
  emit("confirm");
};
defineExpose({
  open,
  close
});
</script>
<style lang="scss" module></style>
